
<template>
  <div id="app">
    <div class="works">
      <!-- 每列盒子 -->
      <div class="column" v-for="(columnItem, index) in newarr" :key="index">
        <!-- 每个盒子 -->
        <div
          class="communityBox"
          v-for="item in columnItem"
          v-bind:key="item.zuopinid"
        >
          <img
            :src="item.imageUrl[0]"
            alt=""
            @click="community(item.userid, item.zuopinid)"
          />
          <p class="title">{{ item.title }}</p>
          <div class="biaoQian">
            <template v-if="item.biaoqian.length != 0">
              <span
                v-for="(item1, index) in item.biaoqian"
                v-bind:key="index"
                >{{ item1 }}</span
              >
            </template>
          </div>
          <div class="touXiang">
            <span class="person">
              <span class="touXiangBox">
                <img :src="item.touxiang" alt="" />
              </span>
              <span class="username">{{ item.username }}</span>
            </span>

            <span class="icons">
              <span class="iconfont icon-yanjing"></span>
              <span class="liuLan">{{ item.liulan }}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <p class="loadmore" @click="loadmore" ref="nomore">加载更多</p>
  </div>
</template>

<script>
import "@/assets/font/iconfont.css";

export default {
  data() {
    return {
      communityArr: [],
      newarr: [],
      length: true,
    };
  },
  mounted() {
    this.axios("/ly/works").then((res) => {
      var arr = res.data;
      arr.map((item) => {
        item.biaoqian = item.biaoqian.split(",");
        item.imageUrl = item.imageUrl.split(",");
      });
      this.start = arr.length;
      if (arr.length == 15) {
        this.length = true;
      } else {
        this.length = false;
      }
      this.communityArr = arr;
      this.sliceData();
    });
  },

  methods: {
    community(id, zid) {
      this.$router.push({
        path: "/community/zuopinmore",
        query: { userid: id, zuopinid: zid },
      });
    },
    sliceData() {
      // 获取列
      var column = 5;
      //每一列的图片
      var num = Math.floor(this.communityArr.length / column);
      //切割数组
      var arr = this.communityArr.map((item, index) => {
        if (index <= column - 2) {
          return this.communityArr.slice(index * num, (index + 1) * num);
        } else if (index === column - 1) {
          return this.communityArr.slice(index * num);
        }
      });
      this.newarr = arr.filter((item) => item);
    },
    //加载更多
    loadmore() {
      if (this.length) {
        var start = this.start;
        this.axios("/ly/start", { params: { start: start } }).then((res) => {
          var arr = res.data;
          console.log(arr.length);
          if (arr.length == 0) {
            this.length = false;
          } else {
            arr.map((item) => {
              item.biaoqian = item.biaoqian.split(",");
              item.imageUrl = item.imageUrl.split(",");
            });
            this.start += arr.length;
            var arr1 = arr.map((item, index) => {
              if (index <= 5 - 2) {
                return arr.slice(index * 3, (index + 1) * 3);
              } else if (index === 5 - 1) {
                return arr.slice(index * 3);
              }
            });
            var arr2 = arr1.filter((item) => item);
            for (let i = 0; i < arr2.length; i++) {
              for (let j = 0; j < arr2[i].length; j++) {
                this.newarr[i].push(arr2[i][j]);
              }
            }
          }
        });
      } else {
        this.$refs.nomore.innerHTML = "没有更多了";
      }
    },
  },
};
</script>

<style scoped>
#app {
  background-color: #f6f8fa;
  padding-top: 40px;
  padding-bottom: 20px;
}
.works {
  width: 1180px;
  margin: 0 auto;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.column {
  width: 224px;
  /* flex-direction: column; */
}
.communityBox {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}
.communityBox img {
  width: 100%;
}
.title {
  padding: 0 10px;
  font-size: 12px;
  color: #525a67;
  margin-top: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.biaoQian {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.biaoQian span {
  background-color: #f6f8fa;
  padding: 5px 10px;
  font-size: 12px;
  margin-top: 10px;
  margin-left: 10px;
  color: #87959f;
}

.touXiangBox {
  width: 24px;
  height: 24px;
  overflow: hidden;
}
.touXiang img {
  width: 24px;
  border-radius: 50%;
}
.touXiang {
  border-top: 1px solid #eef3f5;
  margin-top: 10px;
  padding: 8px;
  position: relative;
}
.username {
  display: inline-block;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  vertical-align: top;
  margin-left: 10px;
  color: #525a67;
}

.icons {
  position: absolute;
  top: 5px;
  right: 15px;
  text-align: center;
  color: #87959f;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon-yanjing {
  font-size: 26px;
}
.liuLan {
  font-size: 12px;
  line-height: 30px;
  margin-left: 5px;
}
.person:hover {
  cursor: pointer;
  color: #5aa9e7;
}
.username:hover {
  cursor: pointer;
  color: #5aa9e7;
}
.loadmore {
  width: 200px;
  text-align: center;
  margin: 0 auto;
  background-color: #fff;
  padding: 10px 200px;
  border-radius: 12px;
  box-shadow: 2px 5px 5px #87959f;
  color: #ccc;
  cursor: pointer;
}
.communityBox {
  transform: translateY(0);
  /* 移回也需要0.4s时间过渡 */
  transition: transform 0.3s;
}
.communityBox:hover {
  transform: translateY(-10px);
  /* 0.4s完成transform移动效果*/
  transition: transform 0.3s;
  box-shadow: 2px 2px 8px 0 hsl(0deg 0% 85% / 50%);
}
.communityBox img:hover,
.communityBox .person:hover {
  cursor: pointer;
}
.biaoQian span:hover {
  background-color: #87959f;
  cursor: pointer;
  color: #fff;
}
</style>